<template>
  <div class="help-center">
    <!-- 导航头部 -->
    <header class="nav-header">
      <div class="back-icon" @click="router.back()">←</div>
      <h2>帮助中心</h2>
    </header>

    <!-- 搜索栏 -->
    <div class="search-section">
      <div class="search-box">
        <input type="text" v-model="searchQuery" placeholder="搜索常见问题" />
        <i class="search-icon">🔍</i>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <main class="help-content">
      <!-- 常见问题 -->
      <section class="help-section">
        <div class="section-header" @click="toggleSection('faq')">
          <div class="header-left">
            <i class="section-icon">❓</i>
            <h3>常见问题</h3>
          </div>
          <i class="arrow-icon" :class="{ 'rotated': openSections.faq }">▼</i>
        </div>
        <div class="section-content" v-show="openSections.faq">
          <div class="faq-item" v-for="(item, index) in faqList" :key="index">
            <div class="question" @click="toggleQuestion(index)">
              <span>{{ item.question }}</span>
              <i class="arrow-icon" :class="{ 'rotated': item.isOpen }">▼</i>
            </div>
            <div class="answer" v-show="item.isOpen">
              {{ item.answer }}
            </div>
          </div>
        </div>
      </section>

      <!-- 会员服务 -->
      <section class="help-section">
        <div class="section-header" @click="toggleSection('member')">
          <div class="header-left">
            <i class="section-icon">👑</i>
            <h3>会员服务</h3>
          </div>
          <i class="arrow-icon" :class="{ 'rotated': openSections.member }">▼</i>
        </div>
        <div class="section-content" v-show="openSections.member">
          <div class="service-item" v-for="(item, index) in memberServices" :key="index">
            <h4>{{ item.title }}</h4>
            <p>{{ item.description }}</p>
          </div>
        </div>
      </section>

      <!-- 配送说明 -->
      <section class="help-section">
        <div class="section-header" @click="toggleSection('delivery')">
          <div class="header-left">
            <i class="section-icon">🚚</i>
            <h3>配送说明</h3>
          </div>
          <i class="arrow-icon" :class="{ 'rotated': openSections.delivery }">▼</i>
        </div>
        <div class="section-content" v-show="openSections.delivery">
          <div class="delivery-info">
            <p>{{ deliveryInfo }}</p>
          </div>
        </div>
      </section>

      <!-- 联系我们 -->
      <section class="help-section">
        <div class="section-header" @click="toggleSection('contact')">
          <div class="header-left">
            <i class="section-icon">📞</i>
            <h3>联系我们</h3>
          </div>
          <i class="arrow-icon" :class="{ 'rotated': openSections.contact }">▼</i>
        </div>
        <div class="section-content" v-show="openSections.contact">
          <div class="contact-info">
            <div class="contact-item">
              <i>📞</i>
              <div class="info">
                <h4>客服热线</h4>
                <p>400-888-8888</p>
                <p class="time">服务时间：09:00-22:00</p>
              </div>
            </div>
            <div class="contact-item">
              <i>💬</i>
              <div class="info">
                <h4>在线客服</h4>
                <p>点击进入在线客服</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const searchQuery = ref('')

// 控制各个部分的展开/收起状态
const openSections = reactive({
  faq: true,
  member: false,
  delivery: false,
  contact: false
})

// 常见问题列表
const faqList = reactive([
  {
    question: '如何成为会员？',
    answer: '您可以通过APP注册账号或在门店扫码注册成为会员。注册后即可享受会员专属优惠。',
    isOpen: false
  },
  {
    question: '会员积分如何获取？',
    answer: '会员每消费1元可获得1个积分。积分可用于兑换商品或抵扣消费。',
    isOpen: false
  },
  {
    question: '如何使用优惠券？',
    answer: '在下单时选择可用的优惠券即可抵扣相应金额。部分优惠券可能有使用限制，请查看具体使用规则。',
    isOpen: false
  }
])

// 会员服务信息
const memberServices = [
  {
    title: '会员等级特权',
    description: '会员分为普通会员、银卡会员、金卡会员三个等级，不同等级享受不同权益。'
  },
  {
    title: '积分兑换',
    description: '积分可兑换多种商品，还可参与限时兑换活动。'
  },
  {
    title: '生日特权',
    description: '会员生日当月可获得生日礼券，享受生日特别优惠。'
  }
]

// 配送说明
const deliveryInfo = '我们提供专业的外送服务，配送范围为门店3公里内。订单满50元即可享受免费配送，不满50元收取配送费5元。配送时间预计30-45分钟，特殊天气可能会延长配送时间。'

// 切换问题展开/收起状态
const toggleQuestion = (index: number) => {
  faqList[index].isOpen = !faqList[index].isOpen
}

// 切换板块展开/收起状态
const toggleSection = (section: keyof typeof openSections) => {
  openSections[section] = !openSections[section]
}
</script>

<style scoped>
.help-center {
  width: 400px;
  padding-bottom: 76px;
  background-color: #f8f9fa;
  min-height: 100vh;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.nav-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  color: white;
}

.back-icon {
  font-size: 24px;
  margin-right: 20px;
  cursor: pointer;
}

.nav-header h2 {
  margin: 0;
  font-size: 20px;
}

.search-section {
  padding: 80px 20px 20px;
  background: #fff;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
}

.search-icon {
  position: absolute;
  right: 16px;
  color: #666;
}

.help-content {
  padding: 20px;
}

.help-section {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  cursor: pointer;
  background: #f8f9fa;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-icon {
  font-size: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.arrow-icon {
  transition: transform 0.3s ease;
}

.arrow-icon.rotated {
  transform: rotate(180deg);
}

.section-content {
  padding: 16px;
}

.faq-item {
  margin-bottom: 16px;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

.answer {
  padding: 12px;
  color: #666;
  line-height: 1.6;
}

.service-item {
  margin-bottom: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.service-item h4 {
  margin: 0 0 8px;
  color: #333;
}

.service-item p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.delivery-info {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  line-height: 1.6;
  color: #666;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.contact-item i {
  font-size: 24px;
}

.contact-item .info h4 {
  margin: 0 0 8px;
  color: #333;
}

.contact-item .info p {
  margin: 0;
  color: #666;
}

.contact-item .time {
  font-size: 14px;
  color: #999;
  margin-top: 4px;
}
</style>